<template>
  <div style="padding: 20px">
    <span>这里记录了一些活动照片</span>
    <el-divider content-position="right">照片集</el-divider>
    <div style="margin: 50px;">
      <waterfall :col='col' :data="data" :isTransition="false" >
        <template>
          <div v-for="(item,index) in data" :key="index+20" style="margin: 12px;">
            <el-card :body-style="{ padding: '0px'}" shadow="hover" >
              <el-image :src="item.imgUrl" :preview-src-list="item.imgUrls">
              </el-image>
              <div v-if="item.title" style="padding-top: 10px; padding-left: 10px; font-size: 1.2rem;">
                <span>{{item.title}}</span>
              </div>
              <div style="color: gray;padding: 8px; float: right;">
                <span v-if="(item.imgUrls.length > 1)">共 {{item.imgUrls.length}} 张照片 </span>
                <span>@ {{item.pubDate}}</span>
              </div>
            </el-card>
          </div>
        </template>
      </waterfall>
    </div>
  </div>
</template>

<script scoped>
export default {
  data () {
    return {
      data: [],
      col: 5,
      loading: true,
      fit: 'cover',
      maxSize: 400
    }
  },
  mounted () {
    window.addEventListener('resize', this.onResize)
    this.onResize()
  },
  created () {
    this.baseURI = this.$http.defaults.baseURL
    var albumData = []
    this.$http.get('album/list').then(res => {
      var albumList = res.data
      this.loading = false
      albumList.forEach(item => {
        var album = { title: item.title, pubDate: item.pubDate, imgUrl: this.baseURI + 'upload/' + item.pictures[0].thumbnails_uploadId }
        var imgUrls = []
        item.pictures.forEach(e => {
          imgUrls = imgUrls.concat(this.baseURI + 'upload/' + e.uploadId)
        })
        album.imgUrls = imgUrls
        albumData = albumData.concat(album)
      })
      this.data = albumData
    })
  },
  methods: {
    onResize () {
      var width = document.body.getBoundingClientRect().width
      if (width < 1280) width = 1280
      const waterfallWidth = width - 152
      this.col = waterfallWidth / (this.maxSize + 24) + 1
    }
  }
}
</script>

<style scoped>
</style>
